<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<header>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>CastleDB - The structured static database</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</header>

<body>

<div id="page" class="home">

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="/"><img src="img/icon.png"/> CastleDB</a>
				<em>The structured static database</em>
			</div>
		</div>
	</div>

	<div class="bg">
	<div class="container">

		<div class="head">

		<h1><img src="img/icon_hd.png"/> CastleDB</h1>

		<p class="tagLine">
			<b>CastleDB</b> is a structured static database easing collaboration.
		</p>

		<div class="img"><img src="img/screen.png"/></div>

		<div class="download">

		<a onclick="$('#download').slideToggle(200)" class="start btn btn-large btn-success"><i class="icon-download-alt icon-white"></i> Download</a>

		<div id="download" style="display:none">


			<a href="file/castledb-1.5-win.zip"><img src="img/win.png"/> Windows x64</a>

			<a href="file/castledb-1.5-osx.zip"><img src="img/osx.png"/> OSX x64</a>
			
			<br/>

			<a href="file/package-1.5.zip"><img src="img/zip.png"/> NWJS Package <span style="font-size:12px" title="To run the package, download http://nwjs.io and put package.nw into the nwjs directory">[?]</span></a>

			<a href="http://github.com/ncannasse/castle"><img src="img/github.png"/> GitHub</a>

			<div class="ver">version 1.5</div>

		</div>

		<p>
			<br/>
			New version includes <a href="#level">Map Editor</a> !
		</p>

		</div>

		</div>
	</div>
	</div>

	<!--- INTRO ---------------------------------------------------------------------------------------- -->

	<div class="bg black">
	<div class="container">
		<div class="row">
			<div class="span6">
				<h3>Why</h3>
				<p>
					<b>CastleDB</b> is used to input structured static data.
				</p>
				<p>
					Everything that is usually stored in <b>XML</b> or <b>JSON</b> files can be stored and modified with CastleDB instead.
				</p>
				<p>
					 For instance, when you are making a game, you can have all of your items and monsters including their names, description, logic effects, etc. stored in <b>CastleDB</b>. 
				</p>
			</div>

			<div class="span6">
				<h3>How</h3>
				<p>
					<b>CastleDB</b> looks like any spreadsheet editor, except that each sheet has a <em>data model</em>.
				</p>
				<p>
					The model allows the editor to validate data and eases user input.
				</p>
				<p>
					For example, when a given column references another sheet row, you will be able to select it directly.
				</p>
			</div>

		</div>

		<div class="row">
			<div class="span6">
				<h3>Storage</h3>
				<p>
					<b>CastleDB</b> stores both its data model and the data contained in the rows into an easily readable <b>JSON</b> file.
				</p>
				<p>
					It can then easily be loaded and used by any program.
				</p>
				<p>
					It makes the handling of item and monster data that you are using in you video game much easier.
				</p>
			</div>

			<div class="span6">
				<h3>Collaboration</h3>
				<p>
					<b>CastleDB</b> allows efficient collaboration on data editing.
				</p>
				<p>
					It uses the JSON format with newlines to store its data, which in turn allows RCS such as GIT or SVN to diff/merge the data files.
				</p>
				<p>
					Unlike online spreadsheet editors, changes are made locally. This allows local experiments before either commiting or reverting.
				</p>
			</div>

		</div>
	</div>
	</div>

	<!--- DATA MODEL ---------------------------------------------------------------------------------------- -->

	<div class="bg">
	<div class="container">

		<h1>The Data Model</h1>


		<div class="row">

			<div class="img"><img src="img/json.png"/></div>

			<p>
				A database consists of several <em>sheets</em>. Each sheet is a collection of structured objects (similar to a TABLE in a traditional database)
			</p>

			<p>
				Each sheet contains several named <em>columns</em>. The columns represent the stored data object fields.
			</p>

			<p>
				Each column has a given <em>type</em> which represents the kind of data that is stored in this column.
			</p>

			<p>
				CastleDB handles column renaming, deleting and conversion between column types.
			</p>

		</div>

		<div class="row">

			<h3>Column Types</h3>

			<p>
				The following types are available for columns types:
			</p>

			<dl class="dl-horizontal big">

			<dt>Unique Identifier</dt>
			<dd>
				This is an unique identifier for the current row. It allows <em>referencing</em> this row from other sheets or columns. Unique identifiers must be valid code identifiers <code>[A-Za-z_][A-Za-z0-9_]*</code>.
			</dd>

			<dt>Text</dt>
			<dd>
				Any text can be input into this column. CastleDB currently does not allow multiline text.
			</dd>

			<dt>Boolean</dt>
			<dd>
				A checkbox can be used to specify if the column is <code>true</code> or <code>false</code>.
			</dd>

			<dt>Integer</dt>
			<dd>
				An integer number (which does not have fractional component)
			</dd>

			<dt>Float</dt>
			<dd>
				Any number.
			</dd>

			<dt>Color</dt>
			<dd>
				A numerical value that represents an RGB color.
			</dd>

			<dt>Enumeration</dt>
			<dd>
				An exclusive choice between a number of given custom values. For example: <code>Yes,No,Cancel,Error</code>
			</dd>

			<dt>Flags</dt>
			<dd>
				Several optional choices between a list of given custom values. For example: <code>hasHat,hasShirt,hasShoes</code>.
			</dd>

			<dt>Reference</dt>
			<dd>
				A reference to another sheet row, using its unique idenfier.
			</dd>

			<dt>File</dt>
			<dd>
				A relative or absolute path to a target file or image.
			</dd>

			<dt>Image</dt>
			<dd>
				An image to be displayed and stored in the database.
			</dd>

			<dt>Tile</dt>
			<dd>
				A sub part of a tileset image.
			</dd>

			<dt>List</dt>
			<dd>
				A list of structured values (<a href="#list">learn more</a>)
			</dd>

			<dt>Custom</dt>
			<dd>
				A custom type <a href="#custom">(learn more)</a>
			</dd>

			<dt>Dynamic</dt>
			<dd>
				Any JSON data that you can input.
			</dd>

			<dt>Data/Tile Layer</dt>
			<dd>
				Packed layer information for map edition <a href="#level">(learn more)</a>
			</dd>



			</dl>

			<h3>Column Storage and default value</h3>

			<p>
				The following table tells how each type is stored into the CDB/JSON file:
			</p>

			<table class="table table-striped">
			<tr>
				<th>Column Type</th>
				<th>Storage</th>
				<th>Default Value</th>
			</tr>
			<tr>
				<td>Unique Identifier</td>
				<td>the identifier String</td>
				<td><code>""</code></td>
			</tr>
			<tr>
				<td>Text</td>
				<td>the text String</td>
				<td><code>""</code></td>
			</tr>
			<tr>
				<td>Boolean</td>
				<td><code>true</code> or <code>false</code></td>
				<td><code>false</code></td>
			</tr>
			<tr>
				<td>Integer</td>
				<td>the integer value</td>
				<td><code>0</code></td>
			</tr>
			<tr>
				<td>Float</td>
				<td>the number value</td>
				<td><code>0</code></td>
			</tr>
			<tr>
				<td>Color</td>
				<td>the color value as integer</td>
				<td><code>0</code> (black)</td>
			</tr>
			<tr>
				<td>Enumeration</td>
				<td>the integer index of the selected value</td>
				<td><code>0</code> (first value)</td>
			</tr>
			<tr>
				<td>Flags</td>
				<td>a bit is set for each index of the selected values</td>
				<td><code>0</code> (no selected value)</td>
			</tr>
			<tr>
				<td>Reference</td>
				<td>the string of the target's unique identifier</td>
				<td><code>""</code> (missing identifier)</td>
			</tr>
			<tr>
				<td>File</td>
				<td>the relative (if possible) or absolute path to the file</td>
				<td><code>""</code> (missing file)</td>
			</tr>
			<tr>
				<td>Image</td>
				<td>the string of the MD5 of the image content bytes, stored in the separate .img JSON data</td>
				<td><code>""</code> (missing image)</td>
			</tr>
			<tr>
				<td>Tile</td>
				<td>a structure in the form of <code>{file:'my.png',size:16,x:5,y:5}</code> with optional <code>width</code> and <code>height</code> fields.</td>
				<td><code>null</code> (missing tile)</td>
			</tr>
			<tr>
				<td>List</td>
				<td>an Array of structured objects <a href="#list">(learn more)</a></td>
				<td><code>[]</code> (empty array)</td>
			</tr>
			<tr>
				<td>Custom</td>
				<td>a mixed array representation <a href="#custom">(learn more)</a></td>
				<td><code>null</code> (missing type)</td>
			</tr>
			<tr>
				<td>Dynamic</td>
				<td>the parsed JSON data value</td>
				<td><code>null</code></td>
			</tr>
			<tr>
				<td>Data Layer</td>
				<td>width x height bytes indexes encoded as Base64 <a href="#level">(learn more)</a></td>
				<td><code>""</code> (empty layer)</td>
			</tr>
			<tr>
				<td>Tile Layer</td>
				<td>either the same as DataLayer or an array of objects <a href="#level">(learn more)</a></td>
				<td><code>""</code> (empty layer)</td>
			</tr>
			</table>

			<h3>Optional Column</h3>

			<p>
				If you uncheck the <b>Required</b> checkbox when creating/modifying a column, the default data will be <code>null</code>. It will also remove the field from the stored object in case no data is present.
			</p>

		</div>

    </div>
	</div>

	<!--- USAGE ---------------------------------------------------------------------------------------- -->

	<div class="bg blue">
	<div class="container">

		<h1>Using CastleDB Editor</h1>

		<div class="row">

		<div class="img"><img src="img/using.png"/></div>

		<h3>Loading and Saving</h3>

		<p>
			Using the File menu, you can create a <code>New</code> file and <code>Load</code> and <code>Save As</code> your <code>.cdb</code> file.
		</p>

		<p>
			Everytime you make a change the database file is automatically saved.
		</p>

		<h3>Keys</h3>

		<p>
			Here are the most frequently used keys for CastleDB:
		</p>

		<ul>
		<li>Arrows are used to navigate between the cells. You can start typing to replace the cell content or use <code>F2</code> or <code>Enter</code> to edit it.</li>
		<li>Use <code>Esc</code> to exit cell edition or close opened List</li>
		<li>Use <code>Insert</code> to insert a new row at the cursor position</li>
		<li>Use <code>Delete</code> to remove the current cell or whole line</li>
		<li>Use <code>Ctrl+Z</code> and <code>Ctrl+Y</code> to Undo/Redo your changes</li>
		<li>Use <code>Tab</code> and <code>Shift+Tab</code> to navigate to next/prev cell on the same row</li>
		<li>Use <code>F4</code> to go the row referenced by the cell and <code>F3</code> to search for references of this row</li>
		<li>Use <code>Ctrl+Tab</code> and <code>Shift+Ctrl+Tab</code> to move between sheets</li>
		<li>Use <code>Ctrl+F</code> to quick filter your database view</li>
		<li>Use <code>Arrow keys</code> to navigate in your database, <code>Enter/F2</code> to edit content and <code>Esc</code> to exit editing</li>
		<li>Use <code>Ctrl+Up/Down</code> to move line(s)</li>
		<li>Use <code>Ctrl+X/C/V</code> to cut/copy/paste</li>
		</ul>

		<h3>Managing sheets</h3>

		<p>
			In order to manage sheets, right click on the sheet title in the bottom bar of the editor. You will be able to:
		</p>
		<ul>
			<li>Add a new sheet</li>
			<li>Move the sheets to reorder them</li>
			<li>Rename and Delete the sheet</li>
			<li>Access sheet options such as <a href="#index">Index</a> and <a href="#group">Groups</a></li>
		</ul>

		<h3>Managing columns</h3>

		<p>
			Right click on the column title in order to access the following options:
		</p>
		<ul>
			<li>Edit the column allowing you to rename it, change its type and its required flag</li>
			<li>Move the columns to reorder them</li>
			<li>Add a new column</li>
			<li>Delete the column or set it as <a href="#disp">Display Column or Icon</a></li>
			<li>Convert the column content if some convert functions are available for this type</li>
		</ul>

		<p>
			CastleDB offers automatic conversion between column types.  This is useful when changing the column type or copy/pasting data between columns/sheets.
		</p>

		<p>
			If no conversion is available, you will get an error when changing the column type.
		</p>

		<h3>Managing rows</h3>

		<p>
			Right click on a row index to select the row and access the following options:
		</p>

		<ul>
			<li>Move Up and Down the row, which can also be triggered by using <code>Ctrl+Up</code> and <code>Ctrl+Down</code> arrows</li>
			<li>Insert a new row at the cursor position, same as <code>Insert</code> key</li>
			<li>Delete the selected row(s), same as <code>Delete</code> key</li>
			<li>Insert or remove a <a href="#sep">Separator</a> for this row</li>
			<li>Look for the references pointing to this row (requires an unique identifier)</li>
		</ul>

		<h3>Selection</h3>

		<p>
			You can select one row by clicking on its index, then select several of them by clicking while holding shift and clicking on other row indices.
		</p>

		<p>
			You can select a range of cells by first selecting a cell then holding shift while clicking on another cell.
		</p>

		<p>
			You can cut/copy/paste using <code>Ctrl+X</code>, <code>Ctrl+C</code> and <code>Ctrl+V</code> between columns and rows.
		</p>

		</div>

	</div>
	</div>

	<!--- CUSTOM ---------------------------------------------------------------------------------------- -->

	<div class="bg">
	<div class="container">

		<h1>More Features</h1>

		<div class="row">

			<a class="anch" name="disp"></a>
			<h3>Display Column</h3>

			<p>
				If you right click on a column and check <code>Display Column</code>, this column will be used instead of the unique identifier when displaying a row reference.
			</p>

			<p>
				This can be useful to display the real name of an item instead of its unique identifier.
			</p>

			<p>
				The stored data and that data input is still made using the unique identifier, this only affects how things are displayed in the CastleDB editor.
			</p>


			<h3>Display Icon</h3>

			<p>
				If you right click on a column of type <code>Tile</code> and check <code>Display Icon</code>, this tile icon will be displayed in front of the name of each instance when displaying a row reference.
			</p>

			<a class="anch" name="index"></a>
			<h3>Index</h3>

			<p>
				When you open CastleDB, each row is referenced by a 0-based index.
			</p>

			<p>
				Usually this index is not part of the exported data but you can add it by right-clicking on the sheet name, then check <code>Index</code>. It will add an <code>index</code> object field to your data.
			</p>

			<p>
				For List column types, the index will be unique for the given column.
			</p>

			<a class="anch" name="sep"></a>
			<h3>Separators</h3>

			<p>
				If you right click on a row index, you can check <code>Separator</code> which will create a small visible separator between this row and the previous one.
			</p>

			<p>
				You can double-click on the separator to name it.
			</p>

			<a class="anch" name="group"></a>
			<h3>Add Group</h3>

			<p>
				If you right-click on the sheet name and check the <code>Add Group</code>, it will create a <code>group</code> field that will be an integer index for each row .
			</p>

			<p>
				The index starts at 0, then each time a new separator with a defined title is reached, it will increment by one (unless the first row separator has a title)
			</p>

			<p>
				This will allow you to categorize your sheet rows easily without having to create a specific column for it.
			</p>

		</div>
	</div>
	</div>

	<!--- CUSTOM ---------------------------------------------------------------------------------------- -->

	<div class="bg blue">
	<div class="container">

		<h1>Advanced Types</h1>

		<div class="row">

			<a class="anch" name="list"></a>
			<h3>List Column Type</h3>

			<p>
				When you set the type of a column as <code>List</code> a new hidden sheet will be created.
			</p>

			<p>
				You can then add columns to this sub-sheet and modify it as you would any another sheet.
			</p>

			<p>
				However, the difference is that the data of this sheet is split between your original sheet rows.
			</p>

			<p>
				You can click on the list to toggle its content and insert rows into it.
			</p>

			<p>
				A List is similar to the one-to-many database association.
			</p>

			<a class="anch" name="img"></a>
			<h3>Image</h3>

			<p>
				The images inserted into the database are stored into a separate <code>.img</code> file. Only the MD5 key of the image is stored into the <code>.cdb</code> database.
			</p>

			<p>
				As a consequence, the same image can be used multiple times without increasing overall file size.
			</p>

			<p>
				If you do a lot of images changes, you can use the <code>Clean Images</code> command in the application file menu. This will remove all images that are no longer used from the <code>.img</code> file.
			</p>

			<a class="anch" name="custom"></a>
			<h3>Custom Types</h3>

			<p>
				Custom types are a structured types declared as enums, consisting of several <em>constructors</em>.
			</p>

			<p>
				Custom types can be created and modified by using the <code>Edit Types</code> link at the bottom-right of the editor.
			</p>

			<p>
				Here's an example of a custom type with four constructors:
			</p>
			<pre><span class="kwd">enum</span> MyCustomType {
	Fixed;
	Random( v : Float );
	Monster( ?m : monsters );
	Or( a : MyCustomType, b : MyCustomType );
}</pre>

			<p>
				In that case, a column of this custom type can be one of the following values:
			</p>

			<pre>Fixed
Random(0.5)
Monster(MyMonsterId)
Or(Random(0.5),Fixed)</pre>

			<p>
				A custom type constructor parameter can use the following types:
			</p>

			<ul class="noicon">
			<li><code>Int</code> an integer value</li>
			<li><code>Bool</code> a boolean value</li>
			<li><code>Float</code> any number value</li>
			<li><code>String</code> a string value</li>
			<li><code>CustomType</code> any custom type, including itself</li>
			<li><code>SheetName</code> any sheet name created in the database</li>
			</ul>

			<p>
				If a constructor parameter is prefixed with a <code>?</code>, then it means it's optional and can be omited.
			</p>

			<p>
				Custom types are stored as a mixed array content. The first element of the Array is the index in the constructors list followed by the eventual parameters for this constructor.
			</p>

			<table class="table table-striped">
			<tr>
				<th>Value example</th>
				<th>Stored value</th>
			</tr>
			<tr>
				<td><code>Fixed</code></td>
				<td><code>[0]</code></td>
			</tr>
			<tr>
				<td><code>Random(0.5)</code></td>
				<td><code>[1,0.5]</code></td>
			</tr>
			<tr>
				<td><code>Monster(MyMonsterId)</code></td>
				<td><code>[2,"MyMonsterId"]</code></td>
			</tr>
			<tr>
				<td><code>Or(Random(0.5),Fixed)</code></td>
				<td><code>[3,[1,0.5],[0]]</code></td>
			</tr>
			</table>

			<p>
				Custom type input is strictly validated by CastleDB editor.
			</p>

		</div>
	</div>
	</div>

	<!--- HAXE ---------------------------------------------------------------------------------------- -->

	<div class="bg black">
	<div class="container">
		<a class="anch" name="level"></a>
		<h1>Map Editor</h1>


		<div class="row">

			<div class="img"><img src="img/levelEdit.png"/></div>

			<p class="download">
				<a href="https://github.com/ncannasse/castle/raw/master/www/sample.zip" class="btn btn-success"><i class="icon-download-alt icon-white"></i> Sample.zip</a>
			</p>

			<p>
			Starting with CastleDB 1.1, you can now have a 2D Map Editor that uses CastleDB data for all its input.
			</p>
			
			<p>
				<a href="https://github.com/ncannasse/castle/raw/master/www/sample.zip">Download the sample project</a>, we will use it as a reference in the following description. 
			</p>

			<p>
				<b>Important:</b> The difference between using CastleDB to create your levels and an external editor is that you can assign images/tiles to each of your data, then place them using the CDB map editor.
				This allows you to have a unified framework for creating the whole content of your game.
			</p>

			<h3>Create Level</h3>

			<p>
				When creating a new sheet, check the <code>Create Level</code> option in order to create a level sheet. This will automatically create the necessary columns that let you create and edit tile layers.
			</p>

			<h3>Layers</h3>

			<div class="img"><img src="img/layerList.png"/></div>

			<p>
				A layer is a set of information that is stored in one of the fields of the Level sheet. There are several kind of layers:
			</p>

			<dl class="dl-horizontal big">
				<dt>Tile Layer</dt>
				<dd>
					These layers can be created as soon as you create a new level. Each layer has a name and can be assigned to a tileset. A tile layer can be displayed using three different modes : <em>Tiles, Ground or Objects</em>. <a href="#tile-mode">(learn more)</a>
				</dd>

				<dt>List Layer</dt>
				<dd>
					If you add a <a href="#list">List</a> column to your level sheet that has <code>x</code> and <code>y</code> numerical properties, a list layer which you can visually edit will be created.
					You can add extra properties/columns to the List that you will be able to input directly into the editor. In particular, if you add a <code>Reference</code> to another sheet which has a <code>Tile</code> or <code>Image</code>, you will be able to place these directly into your map.
				</dd>

				<dt>Index Layers</dt>
				<dd>
					If you want to to paint things and have them stored in a compact array instead as of a list of positions, add a column of type <code>Layer</code> to your level sheet. As a restriction, you will not be able to add custom per-cell properties. If you are not on the first layer, the first element of your layer (which has <code>0</code> index) will not be displayed and will act as a transparent element.
				</dd>

				<dt>Zone Layer</dt>
				<dd>
				A zone layer is similar to a List Layer except that it has additional <code>width</code> and <code>height</code> numerical properties. It will be displayed as a given zone in the map editor.
				</dd>
			</dl>

			<p>
				In the sample level, our layers consists of :
			</p>

			<ul class="noicon">
				<li><code>layers</code> several tile layers for the ground and unbreakable elements</li>
				<li><code>triggers</code> zone layers for placing in-game (blue) triggers</li>
				<li><code>collide</code> an index layer of collisions (which are also defined in CDB)</li>
				<li><code>npcs</code> a list layer of characters that enable us to place them into a map with extra properties</li>
			</ul>

			<h4>Layer Display</h4>

			<p>
				A layer extracts the information from the reference it targets:
			</p>

			<ul>
				<li>If the reference has a field of type <code>Image</code>, it will use the image for display</li>
				<li>If the reference has a field of type <code>Color</code>, it will use the color for display</li>
				<li>If there is no information available, you will be able to customize the layer global color</li>
			</ul>

			<h4>Grid and Precise coords</h4>

			<p>
				Index layers are always grid-aligned. Other layers can have more precise positions if you use <code>Float</code> instead of <code>Int</code> for their positions. In that case it's still be possible to activate the <em>Lock Grid</em> option.
			</p>

			<p>
				By default, the grid size is set to <code>16</code> pixels. This can be modified in the level options.
			</p>

			<h4>Layer Compression</h4>

			<p>
				By default, layer data is stored uncompressed. If you are creating a lot of tile/index levels this can result in very big files.
				You can enable/disable the compression of these layer data by doing <code>File / Enable Compression</code>.
				This will compress using the <a href="https://github.com/Cyan4973/lz4">LZ4</a> algorithm which is easy and fast to decompress.
			</p>

			<h3>Common layers options</h3>

			<p>
				You can modify the following properties when clicking on any layer:
			</p>

			<div class="img"><img src="img/commonLayerProps.png"/></div>

			<ul class="noicon">
				<li><code>Visible</code> toggle visibility. Please note that this is only used for editing, it is not stored as part of the CDB data.</li>
				<li><code>Lock</code> allows to lock the layer, making it impossible to modify it until it's unlocked.</li>
				<li><code>Alpha</code> changes the alpha value of the layer. Unlike Visible, it is stored in CDB data.</li>
			</ul>

			<p>
				Additionaly, you can right-click on a layer to get the following options:
			</p>

			<div class="img"><img src="img/layerDropDown.png"/></div>

			<ul class="noicon">
				<li><code>Show Only</code> will hide all layers except this one.</li>
				<li><code>Show All</code> restores all layers to visible.</li>
				<li><code>Rename</code> changes the layer name (tile layer only, other layers names can be changed by renaming the corresponding column)</li>
				<li><code>Clear</code> clears the layer data.</li>
				<li><code>Delete</code> removes the layer (tile layer only, other layers can be removed by deleting the corresponding column)</li>
			</ul>

			<a class="anch" name="tile-mode"></a>
			<h3>Tile Layers</h3>

			<p>
				A tile layer consists of an array of tiles from a single tileset.
			</p>

			<p>
				You can change the following properties when clicking on a layer:
			</p>

			<div class="img"><img src="img/tileLayerProps.png"/></div>

			<ul class="noicon">
				<li><code>Mode</code> a tile layer can work in three different modes. The default mode is <em>Tiles</em>, other modes are detailed below.</li>
				<li><code>File</code> allows you to change the tileset for this layer.</li>
				<li><code>Size</code> by default CDB uses 16x16 tiles. You can change it on a per layer basis. Please note that you should also change your level tile size by using the <code>Options</code> menu.</li>
			</ul>

			<h4>Objects Mode</h4>

			<p>
				Objects mode is a different way of storing your tiles.
			</p>

			<p>
				While in Tile Mode, the layer data consists of an array of width x height tiles, the object mode is a list of X,Y,Tile.
			</p>

			<div class="img"><img src="img/tileObjects.png"/></div>

			<p>
				In order to use Object Mode, you must first group one or several tiles into an <code>Object</code> by using the tile palette. Select the <code>Object</code> mode and you will be able to group several tiles by using the (+) button or pressing <code>O</code>
			</p>

			<p>
				You can now put your objects into your Tile Layer. Objects are sorted accordingly to their lower Y, so it means that unlike in Tile Mode you can have several objects that mask each other.
			</p>

			<p>
				Object positions are in pixels, not in the grid. You can still align the objects to the grid by using the <code>G</code> key.
			</p>

			<p>
				You can also flip and rotate the tiles that are put into the Object Layer by using <code>F</code> and <code>D</code> keys.
			</p>

			<p>
				The encoding of Object Layer is a list of base64 encoded 16-bits values as follows:
			</p>

			<ul class="noicon">
				<li><code>0xFFFF</code> : marks this layer as Object Layer, followed by the below information, for each object :</li>
				<li><code>X</code> the X position of the object in the level in pixels</li>
				<li><code>Y</code> the Y position of the object in the level in pixels</li>
				<li><code>ID</code> the object id (top-left tile id if the object contains several tiles), which is its position in the tileset</li>
			</ul>

			<p>
				Each of these three values can have their higher bit set: the object rotation is encoded into the higher bit of X and Y. The flip flag is encoded into the higher bit of the ID value.
			</p>

			<h4>Ground Mode</h4>

			<p>
				The ground mode is similar to the tiles mode except that you can configure <b>Grounds</b> and <b>Borders</b> so they get automatically generated for you.
			</p>

			<p>
				Try changing the <code>ground</code> layer in the sample between Ground and Tile to see the difference.
			</p>

			<p>
				<em>At the moment, documentation on how to setup grounds and borders is not available yet.</em>
			</p>

			<h3>Per-tile Properties</h3>

			<p>
				Each tile of each tileset can have some properties which are shared between levels.
			</p>

			<p>
				You can specify these properties by modifying the level <code>tileProps</code> columns.
			</p>

			<div class="img"><img src="img/tileProps.png"/></div>

			<p>
				In the sample, we have created a <code>collide</code> column which references our <code>collide</code> sheet and allows us to
				specify a per-tile collision.
			</p>

			<p>
				In order to edit the per-tile properties, select the property name in the drop down menu of the tile palette.
				You will be able to set the property value for each tile. Please note that this information is shared between levels,
				so modifying a tile property for a level will also modify it for other levels.
			</p>

			<h3>List layers</h3>

			<p>
				List layers allows you to place some instances referencing another sheet in your level.
			</p>

			<div class="img"><img src="img/tileEdit.png"/></div>

			<p>
				In our example level, we have an <code>npcs</code> column which is a <code>List</code> containing <code>kind</code>, <code>x</code>, <code>y</code> and <code>item</code> values.
			</p>

			<p>
				<code>kind</code> references the <code>npc</code> sheet, so the npc image will be used to display the instance in the level editor.
			</p>

			<p>
				Once an instance is put into the level, you can use the <code>E</code> key with your mouse over it to edit its properties.
			</p>

			<p>
				Unlike tile layers, list layers are normal CDB data which can also be edited directly through the spreadsheet editor.
			</p>

			<h3>Zone layers</h3>

			<p>
				Zone layers are similar to list layers except that they also have <code>width</code> and <code>height</code> properties, allowing them to cover a zone of your level.
			</p>

			<p>
				Their properties can also be edited with the <code>E</code> key.
			</p>

			<h3>Shortcuts</h3>

			<ul class="noicon">
				<li><code>Left-click</code> place tile (default), move the selected area (if any), paint with selected tile (in Paint mode)</li>
				<li><code>Right-click</code> pick tile under cursor</li>
				<li><code>S</code> select tile under the cursor (hold and drag to select an area)</li>
				<li><code>Del/Ctrl+X</code> delete tile under the cursor (default) or in the selected area (if any)</li>
				<li><code>Ctrl+Del</code> delete all tiles like the one under the cursor</li>
				<li><code>Tab</code> next layer</li>
				<li><code>Shift+Tab</code> previous layer</li>
				<li><code>V</code> toggle visibility for current layer</li>
				<li><code>L</code> toggle lock for current layer</li>
				<li><code>G</code> toggle grid lock (tile layers in Objects mode and List/Zone layers with Float positions only)</li>
				<li><code>I</code> toggle palette visibility</li>
				<li><code>P</code> paint with current tile</li>
				<li><code>R</code> toggle random mode (select a random element as part of current palette selection)</li>
				<li><code>+/-</code> (numpad) zoom in/zoom out</li>
				<li><code>Shift+Mouse Wheel</code> zoom in/zoom out</li>
				<li><code>/</code> (numpad) return to default zoom</li>
				<li><code>E</code> edit list/zone layer instance properties</li>
				<li><code>Esc</code> clear selection</li>
				<li><code>Space</code> hold to scroll</li>
				<li><code>F</code> flip current tile (tile objects only)</li>
				<li><code>D</code> rotate current tile (tile objects only)</li>
				<li><code>O</code> create object group in tile palette</li>
				<li><code>Arrow keys</code> navigate in the tile palette</li>
				<li><code>Ctrl+F4</code> close the current level</li>
			</ul>

		</div>

	</div>
	</div>

	<!--- HAXE ---------------------------------------------------------------------------------------- -->

	<div class="bg">
	<div class="container">

		<h1>Haxe Integration</h1>

		<div class="row">

			<div class="img"><img src="img/haxelogo.png"/></div>

			<p>
				CastleDB was created using the <a href="http://haxe.org">Haxe</a> technology, it also allows some Haxe-specific integration.
			</p>

			<p>
				The powerful Haxe Macros will allow direct generation of all the type declarations from the CastleDB Data Model.
			</p>

			<p>
				This is simply done by creating a source file such as:
			</p>

			<pre><span class="cmt">// Data.hx</span>
<span class="kwd">private typedef</span> Init = haxe.macro.MacroType&lt;[cdb.Module.build(<span class="str">"myDataFile.cdb"</span>)]&gt;;
</pre>

			<p>
				When compiling with <code>-lib castle</code>, this will create all the types stored in the CDB model.
			</p>

			<p>
				You can still initialize your CDB data at runtime, then access it using the accessors:
			</p>

			<pre>
<span class="kwd">var</span> content : String = .... <span class="cmt">// load CDB file content</span>
Data.load(content);
Data.monsters.all; <span class="cmt">// all the objects of the "monsters" sheet</span>
<span class="kwd">var</span> dragon : Data.Monsters = Data.monsters.get(Dragon); <span class="cmt">// using the unique ID generated enum</span>
trace(d.loot.name); <span class="cmt">// automatically fetch the Refenced objects</span></pre>

			<p>
				All the accesses are strictly typed by Haxe.
			</p>

			<h3>Generated types</h3>

			<p>
				The main type of the module is generated with the <code>load</code> static field and for each declared sheet a static field corresponding to the sheet name will be created.
			</p>


			<p>
				If the sheet does not have an unique identifier, only the <code>all</code> field is available.
			</p>

			<p>
				If the sheet has an unique identifier, you can access the <code>all</code> field, but also use <code>get</code> (by id) and <code>resolve</code> (by string)
			</p>

			<p>
				For each sheet named <code>mySheet</code> we will generate the following types:
			</p>
			<ul>
				<li><code>MySheetDef</code> is the original object as parsed by JSON.</li>
				<li><code>MySheet</code> is an abstract type that allows only reading the fields and perform some conversions (see below)</li>
				<li><code>MySheetKind</code> is an enum containing all the unique identifiers found in <code>mySheet</code></li>
			</ul>

			<p>
				The <code>MySheetKind</code> type is an abstract value so the actual runtime value is still the identifier string. However, it allows for strictly typing the identifiers. You can still use <code>.toString()</code> to access the original string.
			</p>

			<h3>Column type mapping</h3>

			<p>
				The different column types are mapped to the following types:
			</p>

			<dl class="dl-horizontal big">
				<dt>Unique Identifier</dt>
				<dd>
					<code>SheetNameKind</code> : an abstract enum is created for each sheet
				</dd>

				<dt>Text</dt>
				<dd>
					<code>String</code>
				</dd>

				<dt>Boolean</dt>
				<dd>
					<code>Bool</code>
				</dd>

				<dt>Integer</dt>
				<dd>
					<code>Int</code>
				</dd>

				<dt>Float</dt>
				<dd>
					<code>Float</code>
				</dd>

				<dt>Color</dt>
				<dd>
					<code>Int</code>
				</dd>

				<dt>Enumeration</dt>
				<dd>
					<code>SheetName_ColumName</code> : an abstract enum is created. If they have the same values in the same order, they are all aliases to the same enum.
				</dd>

				<dt>Flags</dt>
				<dd>
					<code>cdb.Types.Flags&lt;SheetName_ColumnName&gt;</code> : an abstract enum is created as for Enumeration. The bits are wrapped using the <code>Flags</code> abstract which allows typed <code>has</code> and <code>iterator</code> methods.
				</dd>

				<dt>Reference</dt>
				<dd>
					<code>TargetSheetName</code> : referenced object is fetched when accessed. You can access only the identifier by using <code><em>columnName</em>Id</code> field.
				</dd>

				<dt>File</dt>
				<dd>
					<code>String</code>
				</dd>

				<dt>Image</dt>
				<dd>
					<code>String</code> : the MD5 key only, no image loading is supported at the moment.
				</dd>

				<dt>Tile</dt>
				<dd>
					<code>cdb.Types.TilePos</code> : contains the tileset file and size, the x/y position and optional width/height (by default it is 1)
				</dd>

				<dt>List</dt>
				<dd>
					<code>cdb.Types.ArrayRead&lt;SheetName_ColumnName&gt;</code> : a read-only array of the structured objects, allows indexed access, length and iteration.
				</dd>

				<dt>Custom</dt>
				<dd>
					<code>SheetName_ColumnName</code> : values are converted on-the-fly to the enum created as it has been declared.
				</dd>

				<dt>Dynamic</dt>
				<dd>
					<code>Dynamic</code> : data as-it.
				</dd>

				<dt>Data Layer</dt>
				<dd>
					<code>cbd.Types.Layer&lt;SheetName&gt;</code> : you can decode the layer by passing the <code>Data.sheetName.all</code> array to the <code>decode()</code> function.
				</dd>

				<dt>Tile Layer</dt>
				<dd>
					<code>cbd.Types.TileLayer</code> : you can decode the layer by using the <code>t.data.decode()</code> function. It will automatically decompress data and will return an Array of 16-bits values.
					If the tile layer is in tile/ground mode, this gives you  width x height values. If it is in object mode, see the object layer encoding section.
				</dd>

			</dl>

			<h3>Example</h3>

			<p>
				You can see a small example of Haxe integration on GitHub <a href="https://github.com/ncannasse/castle/tree/master/src/test">here</a>.
			</p>

			<p>
				If you want to see what code is being actually generated, you can compile with <code>-D dump=pretty</code> and look at the <code>dump</code> directory after successful compilation.
			</p>

			<p>
				<b style="color:#A00">Warning</b> : castle library requires either Haxe 3.2+ or a recent Haxe build to work. You can download it from <a href="http://hxbuilds.s3-website-us-east-1.amazonaws.com/builds/haxe/">this page</a>
			</p>

		</div>
	</div>
	</div>

	<!--- ABOUT ---------------------------------------------------------------------------------------- -->

	<div class="bg black last">
	<div class="container">

		<div class="row">

			<h3>About</h3>

			<p>
				CastleDB was created by <a href="https://twitter.com/ncannasse">@ncannasse</a> using <a href="http://haxe.org">Haxe</a> and <a href="https://github.com/rogerwang/node-webkit">Node Webkit</a>. It's hosted on <a href="http://github.com/ncannasse/castle">GitHub</a> and used professionally by <a href="http://shirogames.com">Shiro Games</a>.
			</p>

			<p>
				CastleDB was notably used to create the whole content for <a href="http://evoland2.com">Evoland 2</a>
			</p>

			<p>
				CastleDB is an open source software usable in commercial projects without any restriction.
			</p>

			<div class="p">
				If you wish to help CastleDB development, you can
			<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="BRFRPK8TYXYEC">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" style="border:none" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
</form>
			</div>

		</div>
	</div>

</div>
</body>

</html>
